<template>
  <v-card class="ChatBox-Container">
    <v-toolbar flat height="64" color="#D9D9D9" class="header text-left">
      <v-list-item two-line class="pa-0">
        <v-list-item-content>
          <v-list-item-title>Message</v-list-item-title>
          <v-list-item-subtitle class="subtitle">Ken Wong</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-spacer></v-spacer>
      <v-menu offset-y offset-x>
        <template v-slot:activator="{ on }">
          <v-icon v-on="on" class="pointer icon mr-4"
            >mdi-dots-horizontal</v-icon
          >
        </template>
        <Members></Members>
      </v-menu>
      <v-icon class="icon" @click="$emit('close')">mdi-close-thick</v-icon>
    </v-toolbar>
    <ChatsRecords v-bind="$attrs"></ChatsRecords>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ChatsRecords from "@/components/Project/Chats/ChatsRecords/ChatsRecords.vue";
import Members from "./Members.vue";
@Component({
  components: {
    ChatsRecords,
    Members,
  },
})
export default class ChatBox extends Vue {}
</script>
<style lang="scss">
@import "./ChatBox.scss";
</style>
